<style lang="scss" scoped>
.input-group {
  line-height: 1;
  overflow: hidden;
  .content_input-title {
    font-size: 28upx;
    color: $f303133;
    margin-top: 48upx;
    margin-bottom: 32upx;
  }
  .content_input-group {
    display: flex;
    align-items: center;
    padding-bottom: 32upx;
    border-bottom: 2upx solid #f0f2f5;
    .content_input-cell {
      flex: 1;
      display: flex;
      align-items: center;
      .content_input {
        flex: 1;
        font-size: 28upx;
        color: $f303133;
      }
      .content_input-suffix {
        font-size: 28upx;
        color: $f303133;
        transform: translateY(2upx);
      }
    }
    .line {
      margin: 0 32upx;
      width: 16upx;
      height: 2upx;
      background: $f606266;
    }
  }
}
/deep/.placeholder-class {
  font-size: 28uxp;
  color: $f909399;
}
</style>
<template>
  <view class="input-group">
    <view class="content_input-title" v-if="title">{{ title }}</view>
    <view class="content_input-group">
      <view class="content_input-cell">
        <input
          :type="type"
          placeholder-class="placeholder-class"
          placeholder="请输入"
          class="content_input"
          maxlength="7"
          :value="left"
          @input="inputChange('left', $event)"
        />
        <view class="content_input-suffix">
          <slot name="prefix"></slot>
        </view>
      </view>
      <view class="line"> </view>
      <view class="content_input-cell">
        <input
          maxlength="7"
          :type="type"
          placeholder="请输入"
          class="content_input"
          :value="right"
          @input="inputChange('right', $event)"
        />
        <view class="content_input-suffix"> <slot name="suffix"></slot> </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
@Component
export default class Index extends Vue {
  @Prop({ type: String, default: "" }) title;
  @Prop({ type: [String, Number], default: "" }) left;
  @Prop({ type: [String, Number], default: "" }) right;
  @Prop({ type: String, default: "text" }) type;
  @Prop({ type: String, default: "left" }) leftAlias;
  @Prop({ type: String, default: "right" }) rightAlias;

  inputChange(key: string, event: any) {
    this.$emit(`update:${key}`, event.target.value);

    switch (key) {
      case "left":
        this.$emit("change", this.leftAlias, event.target.value);
        break;
      default:
        this.$emit("change", this.rightAlias, event.target.value);
        break;
    }
  }
}
</script>
